<!DOCTYPE html>
<html lang="Zh-CN">
<head>
  <meta charset="utf-8">
  <base target="_blank" />
  <title>Mooney's Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/style.css">

</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
	<!--模板内容===============================================================================================-->
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>01-Login</h3>
				</div>
				<div class="demo-img">
					<img src="img/01-login.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/01/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av60343435">查看视频</a>
				</div>
			</div>
	    </div>
	<!-- start ===============================================================================================-->
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>02-Button</h3>
				</div>
				<div class="demo-img">
					<img src="img/02-button.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/02/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av60345560">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>03-Page</h3>
				</div>
				<div class="demo-img">
					<img src="img/03-page.jpg">
				</div>
				<div class="content">
					<p>
					暂时还没有哦，那位好心人手打一下。欢迎各位在视频评论区放源码-_-
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/文件编号/index.html">效果演示</a>
					<a href="#">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>04-Button</h3>
				</div>
				<div class="demo-img">
					<img src="img/04-button.jpg">
				</div>
				<div class="content">
					<p>
					暂时还没有哦，那位好心人手打一下。欢迎各位在视频评论区放源码-_-
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/文件编号/index.html">效果演示</a>
					<a href="#">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>05-All-Button</h3>
				</div>
				<div class="demo-img">
					<img src="img/05-All-Button.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/05/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av60925664">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>06-Button</h3>
				</div>
				<div class="demo-img">
					<img src="img/06-Button.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/06/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av60643987">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>07-Clock</h3>
				</div>
				<div class="demo-img">
					<img src="img/07-Clock.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/07/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av60769443">查看视频</a>
				</div>
			</div>
	    </div><div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>08-Share</h3>
				</div>
				<div class="demo-img">
					<img src="img/08-Share.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/08/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av61797588#reply1844689822">查看视频</a>
				</div>
			</div>
	    </div><div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>09-Skills-Meter</h3>
				</div>
				<div class="demo-img">
					<img src="img/09-skills-meter.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/09/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av60770267">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>10-3D-Shader</h3>
				</div>
				<div class="demo-img">
					<img src="img/10-3D-Shader.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/10/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av63969073">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>11-Text-Smoke</h3>
				</div>
				<div class="demo-img">
					<img src="img/11-Text-Smoke.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/11/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av63970445">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>12-WaterRipple</h3>
				</div>
				<div class="demo-img">
					<img src="img/12-Water-Ripple.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/12/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av63971968">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>13-Send-Msg</h3>
				</div>
				<div class="demo-img">
					<img src="img/13-SendMessage.jpg">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/13/index.html">效果演示</a>
					<a href="https://www.bilibili.com/video/av62807963">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>调试模板14</h3>
				</div>
				<div class="demo-img">
					<img src="">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/文件编号/index.html">效果演示</a>
					<a href="#">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>调试模板15</h3>
				</div>
				<div class="demo-img">
					<img src="">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/文件编号/index.html">效果演示</a>
					<a href="#">查看视频</a>
				</div>
			</div>
	    </div>
		<div class="swiper-slide">
			<div class="card">
				<div class="sliderText">
					<h3>调试模板16</h3>
				</div>
				<div class="demo-img">
					<img src="">
				</div>
				<div class="content">
					<p>
					请左右滑动选择不同卡片，根据图片信息确认你要下载的源码，然后记住图片上方的名字，点击获取源码。<br>
					再在“src”目录下下载相应的源码压缩包。
					</p>
					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
					<a href="demo/文件编号/index.html">效果演示</a>
					<a href="#">查看视频</a>
				</div>
			</div>
	    </div>
	<!-- end ===============================================================================================-->
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 30,
        stretch: 0,
        depth: 200,
        modifier: 1,
        slideShadows : true,
      },
      pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>
</body>
</html>